import React from 'react'
import { Input, Button, List } from 'antd';

// 把UI组件改成无状态组件可以提高程序性能
const TodoListUI = (props) => {
    return (
        <div style={{ margin: '10px' }}>
            <div>
                <Input
                    placeholder={props.inputValue}
                    value={props.inputValue}
                    style={{
                        width: '250px',
                        marginRight: '10px'
                    }}
                    allowClear
                    onChange={props.changeInputValue}
                />
                <Button type="primary" onClick={props.clickBtn}>增加</Button>
            </div>
            <div style={{ width: '320px', marginTop: '15px' }}>
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item, index) => (<List.Item onClick={() => props.deleteItem(index)}>{item}</List.Item>)}
                />
            </div>
        </div>
    )
}

export default TodoListUI;